<template>
  <div class="searchInfo">
    <form class="searchInfo-form" @submit.prevent="submit()">
      <input
        class="searchInfo-form-input"
        v-model="searchkey"
        :placeholder="current?.placeholder"
      />
      <div class="searchInfo-form-button" @click="submit()">搜索</div>
    </form>

    <div class="searchInfo-nav">
      <div class="searchInfo-nav-title">搜索结果</div>
      <div class="searchInfo-nav-list">
        <div
          class="searchInfo-nav-item"
          :class="{
            'searchInfo-nav-item_active': current.name == item.name,
          }"
          v-for="item in nav"
          :key="item.id"
          @mouseenter="changeNav(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div
      class="searchInfo-count"
      v-if="$route.query.search?.length > 0 && count != ''"
    >
      <template v-if="current.router == 'searchProduct'">
        共找到<span>{{ this.count }}</span
        >个与“{{ $route.query.search }}”相关的产品
      </template>
      <template v-else-if="current.router == 'search'">
        共找到<span>{{ this.count }}</span
        >个与“{{ $route.query.search }}”相关的资讯
      </template>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: String,
    count: [String, Number],
  },
  computed: {
    current() {
      return this.nav.find((item) => item.router == this.$route.name) || "";
    },
  },
  data() {
    return {
      nav: [
        {
          name: "产品",
          router: "searchProduct",
          placeholder: "搜一搜查询您想要的产品",
        },
        {
          name: "资讯",
          router: "search",
          placeholder: "搜一搜查询您感兴趣的产品/资讯",
        },
      ],
      searchkey: "",
    };
  },
  watch: {
    // searchkey() {
    //   this.$emit("updata:value");
    // },
  },
  mounted() {
    this.searchkey = this.$route.query.search;
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      this.$router.push({
        name: this.current.router,
        query: {
          search: this.searchkey,
        },
      });
    },
    /**
     * 切换导航
     */
    changeNav(detail) {
      this.$router.push({
        name: detail.router,
        query: {
          search: this.$route.query?.search || "",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.searchInfo {
  width: stretch;
  margin: 12px;

  &-form {
    width: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;

    &-input {
      width: 386px;
      height: 48px;
      border: 1px solid #dfdfdf;
      border-radius: 24px;
      display: flex;
      align-items: center;
      outline: none;
      padding: 0;
      padding-left: 64px;
      color: #030303;
      font-size: 18px;
      background-color: #ffffff;

      background-image: url("@/assets/image/header/ic_search.png");
      background-size: 48px;
      background-repeat: no-repeat;
      background-position-y: center;
      background-position-x: 14px;

      &::-webkit-input-placeholder {
        color: #c9c9c9;
      }
    }

    &-button {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      width: 184px;
      height: 50px;
      background-color: #ee7800;
      border-radius: 24px;
      color: #fff;
      font-size: 16px;

      &:active {
        background-color: rgba(210, 217, 236, 0.878);
      }
    }
  }

  &-count {
    width: stretch;
    margin-top: 40px;
    padding: 0 20px;
    font-size: 18px;

    span {
      color: #f24855;
    }
  }

  &-nav {
    border: 1px solid #f4f4f3;
    margin-top: 40px;
    width: 100%;
    padding-bottom: 14px;

    &-title {
      background-image: url("@/assets/image/header/ic_search.png");
      background-size: 48px;
      background-repeat: no-repeat;
      background-position-y: center;
      background-position-x: 26px;
      padding: 30px 80px;
      font-size: 26px;
      font-weight: bold;
      color: #404040;
    }

    &-list {
      padding: 0 44px;
      display: flex;
    }

    &-item {
      color: #525d6b;
      border-bottom: 2px solid #fff;
      margin-right: 70px;
      line-height: 34px;
      text-decoration: none;
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;

      &_active {
        border-bottom: 2px solid color.$base;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .searchInfo {
    margin: fn.rpx(12);

    &-form {
      margin-top: fn.rpx(50);

      &-input {
        width: fn.rpx(300);
        height: fn.rpx(48);
        border-width: fn.rpx(1);
        border-radius: fn.rpx(24);
        padding-left: fn.rpx(64);
        font-size: fn.rpx(18);

        background-size: fn.rpx(48);
        background-position-x: fn.rpx(14);
      }

      &-button {
        margin-left: fn.rpx(23);
        width: fn.rpx(184);
        height: fn.rpx(50);
        border-radius: fn.rpx(24);
        font-size: fn.rpx(24);
      }
    }

    &-count {
      margin-top: fn.rpx(40);
      font-size: fn.rpx(18);
      padding: 0 fn.rpx(20);
    }

    &-nav {
      border-width: fn.rpx(2);
      margin-top: fn.rpx(40);
      padding-bottom: fn.rpx(28);

      &-title {
        background-size: fn.rpx(48);
        background-position-x: fn.rpx(26);
        padding: fn.rpx(30) fn.rpx(80);
        font-size: fn.rpx(26);
      }

      &-list {
        padding: 0 fn.rpx(44);
      }

      &-item {
        border-bottom-width: fn.rpx(4);
        margin-right: fn.rpx(70);
        line-height: fn.rpx(34);
        font-size: fn.rpx(20);

        &_active {
          border-bottom-width: fn.rpx(4);
        }
      }
    }
  }
}
</style>